<template>
  <hi-card v-bind="cardProps">
    <div slot="header" class="hi-card__hd">
      <span class="hi-card__title">{{ title }}</span>
      <el-checkbox v-model="withGraduate" @change="getDepData" v-if="showControl">显示毕业年级</el-checkbox>
    </div>
    <el-tree
      v-loading="loading"
      v-bind="Object.assign(treeDefaultProps, $attrs)"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      v-on="$listeners"
      :default-expanded-keys="defaultExpandedKeys"
      :data="treeData"
      @node-expand="nodeExpand"
      @node-collapse="nodeCollapse"
    >
      <hi-tree-node
        slot-scope="scope"
        v-bind="treeNodeProps"
        :icon="iconAction(scope)"
        :label="scope.data[treeNodeProps.label]"
      >
        <slot name="tree-node" :scope="scope" />
      </hi-tree-node>
    </el-tree>
  </hi-card>
</template>
<script>
const treeApiMap = {
  tch: 'getDepartmentTree', // 老师通用部门树
};

const iconMap = {
  tch: {
    school: 'iconSchool',
    org: 'folder'
  },
  stu: {
    school: 'iconSchool',
    grade: 'iconGrade',
    gradeClass: 'iconClass'
  },
  stuClass: {
    school: 'iconSchool',
    grade: 'iconGrade',
    gradeClass: 'iconClass'
  },
  gradeTree: {
    school: 'iconSchool',
    grade: 'iconGrade',
    gradeClass: 'iconClass',
    gradeLevel: 'folder'
  }
};
export default {
  props: {
    showControl: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '组织机构'
    },
    type: {
      type: String,
      default: 'tch'
    },
    // 是否默认展开一层数据
    expandLevelOne: {
      type: Boolean,
      default: true
    },
    treeNodeProps: {
      type: Object,
      default: () => {
        return {
          label: 'label'
        };
      }
    },
    cardProps: {
      type: Object,
      default: () => {
        return {
          width: '260px',
          style: {
            'margin-right': '10px'
          }
        };
      }
    }
  },
  data() {
    return {
      // tree默认配置
      treeDefaultProps: {
        'highlight-current': true,
        'node-key': 'id',
        'expand-on-click-node': false
      },
      treeData: [],
      defaultExpandedKeys: [],
      loading: true,
      withGraduate: false
    };
  },
  created() {
    this.getDepData();
  },
  methods: {
    iconAction({ node, data }) {
      const icons = iconMap[this.type || 'tch'];
      const key =
        data.attribute.nodeType || (node.level === 1 ? 'school' : 'org');
      return icons[key];
    },
    // 获取部门数据
    async getDepData() {
      try {
        this.loading = true;
        const res = await this.$api(treeApiMap[this.type], {
          withGraduate: Number(this.withGraduate)
        });
        this.treeData = res.data;
        // 如果需要默认展开第一层级
        if (
          this.expandLevelOne &&
          this.$attrs['default-expand-all'] === undefined &&
          res.data.length &&
          !this.defaultExpandedKeys.length
        ) {
          this.defaultExpandedKeys = [
            res.data[0][
              this.$attrs['node-key'] || this.treeDefaultProps['node-key']
            ]
          ];
        }
      } catch (err) {
        console.log(err);
      }
      this.loading = false;
    },
    // 展开节点
    nodeExpand(data, node, target) {
      const config = Object.assign(this.treeDefaultProps, this.$attrs);
      this.defaultExpandedKeys.push(data[config['node-key']]);

      this.$emit('node-expand', data, node, target)
    },
    // 节点关闭
    nodeCollapse(data, node, target) {
      const config = Object.assign(this.treeDefaultProps, this.$attrs);
      const key = data[config['node-key']];
      this.defaultExpandedKeys = this.defaultExpandedKeys.filter(key => key !== key);

      this.$emit('node-collapse', data, node, target)
    }
  }
};
</script>
<style scoped lang="scss">
.card-header {
  display: flex;
  justify-content: space-between;
  align-content: center;
}
</style>
